<div class="viewer" v-if="version">
    <div class="scroll-hack" :style="`bottom:-${scrollbarWidth}px;right:-${scrollbarWidth}px;`">
        <div class="lines">
            <div class="line" v-for="line in linesCount">
                <span class="highlight active" v-if="line === currentLine">!</span>
                <span class="highlight added" v-if="version.addedLines.indexOf(line - 1) !== -1 && differencesActive"></span>
                <span class="highlight removed" v-if="version.removedLines.indexOf(line - 1) !== -1 && differencesActive">
                    <img width="7" height="17" class="icon" src="../../../static/svg/removed.svg" alt="">
                </span>
                <span class="index">{{ line }}.</span>
                <span class="question" @click.prevent="onLineClick(line)">?</span>
            </div>
        </div>
        <pre class="code" v-highlightjs="version.content" spellcheck="false" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
    </div>
</div>